<template>
  <view class="container">
    

    <!-- 门店信息 -->
    <view class="shop-info" style="background-color: #0084ff; color: white;">
		<!-- 支付成功提示 -->
		<view><text>支付成功，请您前往指定门店消费</text></view>
      <view class="shop-name">
        <image src="/static/店铺.svg" class="shop-icon" />
        <text>伟业汽车没人厂(人民路店)</text>
      </view>
      <view class="shop-address" style="margin-left: 50rpx;">
        <text>山阳区人民中路32号</text>
      </view>
      <view class="shop-map">
        <image src="/static/map-icon.png" class="map-icon" />
      </view>
    </view>

<view style="margin-left: 20rpx;"><text class="details-title">订单详情</text></view>
    <!-- 订单详情 -->
    <view class="order-details">
      
      <view class="details-item">
        <text>车辆精洗</text>
        <text>¥ 199</text>
      </view>
      <view class="details-item">
        <text>车辆附加费用</text>
        <text>¥ 199</text>
      </view>
    </view>

    <!-- 金额明细 -->
    <view class="amount-details">
      <view class="details-item">
        <text>原价</text>
        <text>¥ 100</text>
      </view>
      <view class="details-item">
        <text>优惠</text>
        <text>-¥ 10</text>
      </view>
      <view class="details-item">
        <text>优惠券</text>
        <text>-¥ 20</text>
      </view>
      <view class="details-item total">
        <text>支付金额</text>
        <text>¥ 90</text>
      </view>
    </view>

    <!-- 订单信息 -->
	
	<view style="margin-left: 20rpx;">  <text class="info-title">订单信息</text></view>
	
    <view class="order-info">
    
      <view class="info-item">
        <text>订单号：</text>
        <text>121212112487878</text>
      </view>
      <view class="info-item">
        <text>下单时间：</text>
        <text>2020.01.08 17:40</text>
      </view>
      <view class="info-item">
        <text>车辆：</text>
        <text>奔驰FWE4/豫A98FHJ</text>
      </view>
    </view>
  </view>
</template>

<script setup>




</script>

<style scoped>
.container {
  padding: 20rpx;
  height: 100vh;
  background-color: #f7f7f7;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
}

.back-button {
  padding: 10rpx;
}

.more {
  display: flex;
  align-items: center;
}

.iconfont {
  font-family: iconfont;
}

.payment-success {
  background-color: #2196f3;
  color: white;
  padding: 20rpx;
  text-align: center;
  margin-bottom: 20rpx;
}

.shop-info {
  background-color: #ffffff;
  padding: 20rpx;
  margin-bottom: 20rpx;
  padding-left: 50rpx;
}

.shop-name {
  display: flex;
  align-items: center;
  margin-bottom: 10rpx;
}

.shop-icon {
  width: 40rpx;
  height: 40rpx;
  margin-right: 10rpx;
}

.shop-address {
  margin-bottom: 10rpx;
}

.shop-map {
  text-align: right;
}

.map-icon {
  width: 40rpx;
  height: 40rpx;
}

.order-details {
  background-color: #ffffff;
  padding: 20rpx;
  margin-bottom: 20rpx;
}

.details-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
}

.details-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10rpx;
}

.amount-details {
  background-color: #ffffff;
  padding: 20rpx;
  margin-bottom: 20rpx;
}

.amount-details .details-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10rpx;
}

.amount-details .total {
  font-size: 32rpx;
  font-weight: bold;
  margin-top: 20rpx;
}

.order-info {
  background-color: #ffffff;
  padding: 20rpx;
  margin-bottom: 20rpx;
}

.info-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
}

.info-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10rpx;
}
</style>